<!DOCTYPE html>
<html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IM 登陆</title>
    <link rel="shortcut icon" href="static/image/favicon.ico">
    <link rel="stylesheet" type="text/css" href="static/css/login/style3.css">
    <link rel="stylesheet" type="text/css" href="static/css/login/animate-custom.css">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <style type="text/css">
        body {
            background: url(static/image/4.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1 style="color:#F0F0F0">Scala 即时通讯系统</span></h1>
    </header>
    <section>
        <div id="container_demo">
            <a class="hiddenanchor" id="toregister"></a>
            <a class="hiddenanchor" id="tologin"></a>
            <div id="wrapper">
                <div id="login" class="animate form">
                    <form action="" autocomplete="on" method="post" class="layui-form" lay-filter="login">
                        <h1>登陆</h1>
                        <p>
                            <label for="email" class="uname" data-icon="u"> 电子邮件 </label>
                            <input id="email" name="email" required="required" type="email"
                                   placeholder="mymail@mail.com">
                        </p>
                        <p>
                            <label for="password" class="youpasswd" data-icon="p"> 密码 </label>
                            <input id="password" name="password" required="required" type="password"
                                   placeholder="eg. 56482sjhjk">
                        </p>
                        <p class="keeplogin">
                            <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping">
                            <label for="loginkeeping">记住我</label>
                        </p>
                        <p class="login button">
                            <input type="submit" value="登陆">
                        </p>
                        <p class="change_link">
                            还没有账号 ?
                            <a href="/#toregister" class="to_register">加入我们</a>
                        </p>
                    </form>
                </div>

                <div id="register" class="animate form">
                    <form action="#" autocomplete="on" class="layui-form" lay-filter="register">
                        <h1> 注册 </h1>
                        <p>
                            <label for="usernamesignup" class="uname" data-icon="u">用户名</label>
                            <input id="usernamesignup" name="usernamesignup" required="required" type="text"
                                   placeholder="myusername5500">
                        </p>
                        <p>
                            <label for="emailsignup" class="youmail" data-icon="e"> 电子邮件</label>
                            <input id="emailsignup" name="emailsignup" required="required" type="email"
                                   placeholder="mymail@mail.com">
                        </p>
                        <p>
                            <label for="passwordsignup" class="youpasswd" data-icon="p">密码 </label>
                            <input id="passwordsignup" name="passwordsignup" required="required" type="password"
                                   placeholder="eg. 56482sjhjk">
                        </p>
                        <p>
                            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">确认密码 </label>
                            <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required"
                                   type="password" placeholder="eg. 56482sjhjk">
                        </p>
                        <p class="signin button">
                            <input type="submit" value="注册">
                        </p>
                        <p class="change_link">
                            已经有账号 ?
                            <a href="/#tologin" class="to_register"> 返回登陆 </a>
                        </p>
                    </form>
                </div>

            </div>
        </div>
    </section>
</div>
<script src="/static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="/static/js/cookie.js" type="text/javascript"></script>
<script src="/static/js/base64.js" type="text/javascript"></script>
<script type="text/javascript">
    layui.use(['layer', 'form', 'jquery'], function () {
        //layui组件
        var layer = layui.layer, form = layui.form(), $ = layui.jquery;
        //判断用户是否是从激活链接过来的
        if (location.href.split("?").length == 2) {
            var status = location.href.split("?")[1].split("=")[1];
            if (status == 1) {
                layer.msg("激活成功，请登录！");
            } else {
                layer.msg("激活失败，请重新激活!");
            }
        }

        //编写函数,在按键升起时触发,监测cookie中是否存在该用户名的key,如果有,则把value赋值给密码框
        $("#email").keyup(function () {
            var email = $("#email").val();
            if (email !== "") {
                var mima = $.cookie($.base64.encode(email).replace("=",""));
                if (mima != null) {
                    var mima = $.base64.decode(mima+"=")
                    $("#password").val(mima);
                    $("#loginkeeping").attr("checked", true);
                    // console.log(email)
                    // console.log(mima)
                }
            }

        })

        //监测邮件
        $("#emailsignup").blur(function () {
            $.ajax({
                url: "user/existEmail",
                type: "POST",
                dataType: "JSON",
                data: {email: $("#emailsignup").val()},
                success: function (data) {
                    if (data.data) {
                        $("#emailsignup").val("").focus();
                        layer.msg("此邮件已经被人注册过！");
                    }
                },
                error: function (data) {
                    layer.msg("服务器错误,请稍后再试！");
                }
            });
        });

        //监测登录密码长度
        $("#password").blur(function () {
            var password = $("#password").val().trim();
            if (!/^[\S]{6,12}$/.test(password)) {
                layer.tips('密码必须6到12位', '#password');
                $("#password").val("");
                return;
            }
        });

        //监测注册密码长度
        $("#passwordsignup").blur(function () {
            var passwordsignup = $("#passwordsignup").val();
            if (!/^[\S]{6,12}$/.test(passwordsignup)) {
                layer.tips('密码必须6到12位', '#passwordsignup');
                $("#passwordsignup").val("");
                $("#passwordsignup_confirm").val("");
            }
        });
        //监听确认密码
        $("#passwordsignup_confirm").blur(function () {
            var passwordsignup_confirm = $("#passwordsignup_confirm").val();
            var passwordsignup = $("#passwordsignup").val();
            if (passwordsignup != '' && passwordsignup_confirm != '' && passwordsignup_confirm != passwordsignup) {
                layer.tips('两次密码不一致', '#passwordsignup_confirm');
                $("#passwordsignup_confirm").val("");
                $("#passwordsignup").val("");
            }
        })

        //注册
        form.on('submit(register)', function (data) {
            var d = {
                'username': $("#usernamesignup").val(),
                'email': $("#emailsignup").val(),
                'password': $("#passwordsignup").val()
            };

            //loading层
            var index = layer.load(0, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                url: "user/register",
                dataType: "JSON",
                contentType: "application/json",
                type: "POST",
                data: JSON.stringify(d),
                success: function (data) {
                    layer.close(index);
                    layer.msg(data.msg + ",请先激活再登陆！");
                    window.location.href = "/#tologin";
                },
                error: function (data) {
                    layer.msg("服务器错误,请稍后再试！");
                }
            });
            return false;
        });
        //登陆
        form.on('submit(login)', function (data) {
            var check = document.getElementById("loginkeeping").checked;
            var d = {'email': $("#email").val(), 'password': $("#password").val()};
            //loading层
            var index = layer.load(1, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                url: "user/login?check=" + check,
                dataType: "JSON",
                contentType: "application/json",
                type: "POST",
                data: JSON.stringify(d),
                success: function (data) {
                    layer.close(index);
                    if (data.code == 1) {
                        layer.msg(data.msg);
                        $("#password").val("");
                    } else if (data.code == 0) {
                        var host = window.location.host;
                        window.location.href = "http://" + host + "/user/index";
                    }
                },
                error: function (data) {
                    layer.msg("服务器错误,请稍后再试！");
                }
            });
            return false;
        });
    })
    ;
</script>
</body>
</html>